<!DOCTYPE html>
<html>

<meta charset="utf-8" />
<head th:include="include :: header"></head>
<link href="../static/css/bootstrap.min.css"
	th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
<link href="../static/azxcrm/css/detailsFollow.css"
	th:href="@{/azxcrm/css/detailsFollow.css}" rel="stylesheet" />
<link href="/ajax/libs/iCheck/custom.css"
	th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet" />
<link href="../static/azxcrm/css/audit.css"
	th:href="@{/azxcrm/css/audit.css}" rel="stylesheet" />
<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<script src="../static/azxcrm/js/YmdClass.mini.js"
	th:src="@{/azxcrm/js/YmdClass.mini.js}"></script>
<body>
	<div class="g-center">
		<!--待跟进订单详情-->
		<div class="g-item-details">
			<p class="g-item-btn">
				待跟进订单详情 <span class="s-addbtn" data-toggle="modal" data-target="#myModa3">添加跟单记录</span>
			</p>
			<div class="g-color">剩余保有时间：<span th:text="${protectDay}"></span>天</div>
			<p class="g-text">
				<span class="s-numbers">订单号：</span><span th:text="${order.orderNum}"></span>
				<span class="s-type">订单类型：<span><span
						th:if="${order.orderType} == 0">线上</span><span
						th:if="${order.orderType} == 1">线下</span></span></span>
			</p>
			<p class="g-text">
				<span class="s-numbers">业务员：</span><span
					th:text="${order.salesUserName}"></span> <span class="s-type">部门：</span>
				<span th:text="${order.deptName}"></span>
			</p>
		</div>
		<!--tab栏-->
		<div class="g-tab-list">
			<ul id="myTab" class="nav nav-tabs list-group-item">
				<li class="active "><a href="#s-tab-1" data-toggle="tab">基本信息</a></li>
				<li><a href="#s-tab-2" data-toggle="tab">跟单记录</a></li>
			</ul>
			<!--基本信息-->
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="s-tab-1">
					<ul class="clearfix">
						<li><span>姓名</span><span
							th:text="${customerClue.customerName}"></span></li>
						<li><span>客户背景</span><span
							th:text="${customerClue.customerBackground}"></span></li>
						<li><span>性别</span> <span
							th:if="${customerClue.customerSex} == 0">未知</span> <span
							th:if="${customerClue.customerSex} == 1">男</span> <span
							th:if="${customerClue.customerSex} == 2">女</span></li>
						<li><span>年龄</span><span
							th:text="${customerClue.customerAge}"></span></li>
						<li><span>手机号码</span><span
							th:text="${customerClue.customerCellphone}"></span></li>
						<li><span>出生日期</span><span
							th:text="${customerClue.customerBirth}"></span></li>
						<li><span>身份证号</span><span
							th:text="${customerClue.customerIdentityNum}"></span></li>
						<li><span>职位</span><span
							th:text="${customerClue.customerJob}"></span></li>
						<li><span>微信号</span><span
							th:text="${customerClue.customerWechatAccount}"></span></li>
						<li><span>紧急联系人</span><span
							th:text="${customerClue.customerEmergencyContact}"></span></li>
						<li><span>联系号码 </span><span
							th:text="${customerClue.customerEmergencyCellphone}"></span></li>
						<li><span>所在地 </span><span
							th:text="${customerClue.customerProvince}+'-'+${customerClue.customerCity}+'-'+${customerClue.customerArea}+'-'+${customerClue.customerAddressDetail}"></span></li>
					</ul>
					<!--客户意向-->
					<div class="g-customer-info">
						<h3 class="pos-rel">客户意向</h3>
						<ul class="clearfix">
							<li><span>入住类型</span><span
								th:if="${customerClue.occupancyType} == 0">非本类型线索</span><span
								th:if="${customerClue.occupancyType} == 1">长住</span><span
								th:if="${customerClue.occupancyType} == 2">短住</span></li>
							<li><span>参加人数</span><span
								th:text="${customerClue.tourismScale}"></span></li>
							<li><span>旅游线路</span><span
								th:text="${customerClue.tourismRoute}"></span></li>
							<li><span>康复项目</span><span
								th:text="${customerClue.recureProject}"></span></li>
						</ul>
					</div>
					<!--客服信息-->
					<div class="g-service-info">
						<h3 class="pos-rel">客服信息</h3>
						<ul class="clearfix">
							<li><span>专属客服</span><span
								th:text="${order.serviceUserName}"></span></li>
							<li><span>联系电话</span><span>183739542899</span></li>
						</ul>
						<p class="g-proposal">
							<span>客服建议:</span><span class="g-proposal-data"
								th:text="${clueCommunication.suggestion}"></span>
						</p>
					</div>
				</div>

				<!--待跟进记录-->
				<div class="tab-pane fade" id="s-tab-2">
					<div class="g-data-list" th:if="${order.orderVisitRecord.visitTime} != null"  th:each="orderVisitRecord : ${orderVisitRecords}">
					   
						<div class="g-data-title">
							<p>
								<span th:text="${order.salesUserName}"></span>:电话拜访了客户 
								<span class="s-data-icon"> 
									<span th:if="${orderVisitRecord.visitStatus} == 0"style="background: #ff0000;" >客服未回访</span>
									<span th:if="${orderVisitRecord.visitStatus} == 1"style="background: #6cb7f7;" >客服已回访</span>
								</span>
							</p>
						</div>
						<div class="g-data-content">
							<p class="clearfix">
								<span>拜访内容：</span>
								<span class="s-data-content" th:text="${orderVisitRecord.visitRecord}"></span>
							</p>
						</div>
						<div class="g-data-time">
							<p>
								<span>拜访时间：</span>
								<span th:text="${orderVisitRecord.visitTime}"></span>
								<a class="s-data-open" data-toggle="modal"  href="#myModal">查看详情</a>
								<input id="recordId" name="recordId" th:value="${orderVisitRecord.recordId}" type="hidden">
                                <input id="orderId" name="orderId" th:value="${orderVisitRecord.orderId}" type="hidden"> 
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--tab栏结束-->
	</div>

	<!--跟单记录详情框-->
	<div class="modal fade" id="myModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">
						跟单记录详情 <span class="glyphicon glyphicon-remove-circle"
							data-dismiss="modal"></span>
					</h4>
				</div>
				<!-- 模态框主体 -->
				<div class="modal-body">
					<p class="s-visit-type">拜访类型：<span class="visitType"></span></p>
					<p class="s-visit-time">拜访时间：<span class="visitTime"></span></p>
					<p class="s-record clearfix"><span>沟通记录：</span><span class="visitRecord"></span></p>
					<p class="s-remarks clearfix"><span>备注：</span><span class="visitRemark"></span></p>
					<p class="s-say-well">下次约定：<span class="visitTimeNest"></span></p>
					<div class="g-odiv">
						<h3 class="pos-rel">客服回访</h3>
						<p class="s-say-well s-time-well">回访时间：<span class="vistitReturnTime"></span></p>
						<p class="s-record s-nr clearfix"><span>回访内容：</span><span class="vistitReturnRecord"></span></p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--添加跟单记录-->
	<!--跟单记录详情框-->
	<div class="modal fade" id="myModa3">
		<div class="modal-dialog">
			<div class="modal-content">
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">
						添加跟单记录 <span class="glyphicon glyphicon-remove-circle"
							data-dismiss="modal"></span>
					</h4>
				</div>
				<!-- 模态框主体 -->
				<div class="modal-body">
					<form action="" id="form-order-addFollow">
					    <input id="status" name="status"  type="hidden">
						<input id="orderId" name="orderId" th:value="${order.orderId}" type="hidden"> 
						<input id="orderNum" name="orderNum" th:value="${order.orderNum}" type="hidden"> 
						<input id="serviceUserId" name="serviceUserId" th:value="${order.serviceUserId}" type="hidden"> 
						<input id="typeId" name="typeId" th:value="${order.typeId}" type="hidden"> 
						<input id="salesUserId" name="salesUserId" th:value="${order.salesUserId}" type="hidden">
						<input id="createTime" name="createTime" th:value="${order.createTime}" type="hidden">
						<input id="deptId" name="deptId" th:value="${order.deptId}" type="hidden">
						<input id="visitId" name="visitId" th:value="${order.OrderVisitRecord.visitId}" type="hidden">
						<input id="visitStatus" name="visitStatus" th:value="${order.OrderVisitRecord.visitStatus}" type="hidden">
						<input id="createBy" name="createBy" th:value="${order.OrderVisitRecord.createBy}" type="hidden">
						<div class="form-group clearfix">
							<label class="g-con">拜访类型：</label> 
							<select class="form-control g-select" name="visitType" id="visitType">
								<option value="" selected="selected">请选择</option>
								<option th:each="visit : ${visitList}"
									th:value="${visit.dictCode}" th:text="${visit.dictLabel}"></option>
							</select>
							
						</div>
						<div class="form-group">
							<label>拜访时间：</label> 
							<select name="year"></select>
							<select name="month"></select>
							<select name="day"></select>
						</div>


						<div class="form-group g-textarea clearfix">
							<label>拜访内容：</label>
							<textarea class="form-control" rows="3" name="visitRecord" id="visitRecord"></textarea>
						</div>
						<div class="form-group g-textarea clearfix">
							<label>备注：</label>
							<textarea class="form-control" rows="3" name="visitRemark" id="visitRemark"></textarea>
						</div>
						<div class="form-group">
							<label>下次约定时间：</label> 
							<select name="year2">
								<!-- <option
									th:value="${#strings.substring(order.orderVisitRecord.visitTimeNest,0,4)}"
									th:text="${#strings.substring(order.orderVisitRecord.visitTimeNest,0,4)}"></option> -->
							</select> <select name="month2">
								<!-- <option
									th:value="${#strings.substring(order.orderVisitRecord.visitTimeNest,5,7)}"
									th:text="${#strings.substring(order.orderVisitRecord.visitTimeNest,5,7)}"></option> -->
							</select> 
							<select name="day2">
								<!-- <option
									th:value="${#strings.substring(order.orderVisitRecord.visitTimeNest,8,10)}"
									th:text="${#strings.substring(order.orderVisitRecord.visitTimeNest,8,10)}"></option> -->
							</select>

						</div>
						<div class="btn-group">
							<button type="submit" class="btn btn-warning dropdown-toggle">确认添加</button>
							<button type="submit" class="btn btn-default dropdown-toggle"
								data-dismiss="modal">取消</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- 操作处理 -->
	<div th:include="include::footer"></div>
	<script src="/js/jquery-ui-1.10.4.min.js"
		th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
	<script src="/ajax/libs/select/select.js"
		th:src="@{/ajax/libs/select/select.js}"></script>
	<script src="../static/azxcrm/js/select.js"
		th:src="@{/azxcrm/js/select.js}"></script>
	<script src="/azxcrm/module/order/addFollow.js"
		th:src="@{/azxcrm/module/order/addFollow.js}"></script>
	<script src="/ajax/libs/iCheck/icheck.min.js"
		th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script src="/ajax/libs//datapicker/bootstrap-datepicker.js"
		th:src="@{/ajax/libs//datapicker/bootstrap-datepicker.js}"></script>
	<script>
		$(".input-group.date").datepicker({
			todayBtn : "linked",
			keyboardNavigation : !1,
			forceParse : !1,
			calendarWeeks : !0,
			autoclose : !0
		});
	</script>
</body>
</html>
<script>
     $(".s-data-open").click(function(){
    	var recordId = $(this).siblings('#recordId').val();
    	var orderId = $(this).siblings('#orderId').val();
    	$.ajax({
    		cache : true,
    		type : "GET",
    		url : ctx +"module/order/getOrderVisitRecord?recordId="+recordId,
    		dataType: 'json',
    		contentType: "application/json; charset=utf-8",
    		
    	    success : function(data) {    	    
    	    	$(".visitType").text(data.visitType);
    	    	$(".visitTime").text(data.visitTime);
    	    	$(".visitRecord").text(data.visitRecord);
    	    	$(".visitRemark").text(data.visitRemark);
    	    	$(".visitTimeNest").text(data.visitTimeNest);
    	    	$(".vistitReturnTime").text(data.vistitReturnTime);
    	    	$(".vistitReturnRecord").text(data.vistitReturnRecord);    	    	
    	    }

    	})
     })
	new YMDselect('year', 'month', 'day')
	new YMDselect('year2', 'month2', 'day2')
</script>